<template>
  <v-chart :ref="'myChart'"
           :theme="tdTheme"
           :autoresize="true"
           @click="onClick"
           :options="polar" />
</template>

<script>
import 'echarts'
import ECharts from 'vue-echarts'
import tdTheme from './theme.json'
export default {
  name: 'Epie',
  components: {
    'v-chart': ECharts
  },
  props: {
    seriesData: {
      type: Array,
      default () {
        return []
      }
    },
    refs: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    subText: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      tdTheme: tdTheme,
      pieData:this.seriesData,
      polar: {
        title: {
          text: this.text,
          subtext: this.subText,
          x: 'center',
          top: '15%'
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: 0
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            data: this.seriesData,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b} : {c} ({d}%)'
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    }
  },
  methods: {
    onClick (event, instance, echarts) {
      this.$emit('chartClick', arguments)
      console.log(event, instance, echarts)
    },
    /**
    * @functionName mergeOptions
    * @param Object pieData 饼图数据
    * @desccription 更新饼图数据
    * @author 穆宏宇
    * @date 2021-04-28 15:04:28
    * @version v1.0.0
    */
    mergeOptions(pieData) {
      const {series} = this.polar
      this.$set(series[0],'data', pieData)
      this.$refs.myChart && this.$refs.myChart.mergeOptions(this.polar, true);
    }
  },
  mounted () {
  }
}
</script>
